<template>
  <VerticalLayout>
    <div
        v-for="fieldConfig in renderFields"
        class="manual-relation-inner-search-field-wrapper">
      <component
          :fieldConfig="fieldConfig"
          :is="FieldSearchRegistry[fieldConfig.component]"
          ref="fields"/>
    </div>
    <template #footer>
      <div class="manual-relation-inner-search-footer">
        <van-button style="min-width: 100px" size="small" round @click="reset">重置</van-button>
        <van-button style="min-width: 100px" size="small" round type="primary" @click="ok">确定</van-button>
      </div>
    </template>

    {{ rendered() }}
  </VerticalLayout>
</template>
<script setup>
import {createProps} from '@/utils';
import VerticalLayout from '@comp/Layout/VerticalLayout.vue';
import FieldSearchRegistry from '@comp/FormEngine/field/FieldSearchRegistry';
import {inject, nextTick, shallowRef} from 'vue';

defineOptions({name: 'ManualRelationInnerSearch'});
const searchFieldRefs = inject('searchFieldRefs');
const emits = defineEmits(['ok']);
const props = defineProps({
  renderFields: createProps(Array, () => []),
});
const fields = shallowRef([]);

function rendered() {
  searchFieldRefs.value.push({
    getParams(params) {
      fields.value.forEach(f => {
        f.getParams && f.getParams(params);
      });
    },
  });
}

function ok() {
  emits('ok');
}

function reset() {
  fields.value.forEach(f => {
    f.reset && f.reset();
  });

  nextTick(() => {
    ok();
  })
}
</script>
<style lang="less">
.manual-relation-inner-search-footer {
  border-top: 1px solid var(--van-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0.25rem;
}

.manual-relation-inner-search-field-wrapper {
  padding: 0.05rem;
}

.manual-relation-inner-search-field-wrapper:not(:last-child) {
  border-bottom: 1px solid var(--van-border-color);
}
</style>